<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="ruleForm"
				label-width="130px"
				label-suffix=":"
				:inline="true"
				class="demo-ruleForm"
			>
				<el-form-item label="俱乐部ID" prop="clubId">
					<el-input
						v-input="{ name: 'num' }"
						clearable
						v-model="ruleForm.clubId"
						:placeholder="$t('common.please_enter')"
						style="width: 130px"
					/>
				</el-form-item>

				<el-form-item label="直属上级代理" prop="parentProxyName">
					<el-input
						v-model.trim="ruleForm.parentProxyName"
						v-input="{ name: 'num_alp' }"
						clearable
						maxlength="11"
						style="width: 150px"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>

				<el-form-item label="所属总代账号" prop="topProxyName">
					<el-input
						v-input="{ name: 'num_alp' }"
						clearable
						v-model="ruleForm.topProxyName"
						maxlength="11"
						style="width: 150px"
						:placeholder="$t('common.please_enter')"
					/>
				</el-form-item>

				<el-form-item label="游戏权限">
					<el-select
						v-model="joinGameLockStatus"
						clearable
						multiple
						:placeholder="
							`${$t(
								'dxn.card_ables_list.table_state_placeholder'
							)}`
						"
					>
						<el-option
							v-for="item in gamePermissionList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="最后登录时间">
					<el-date-picker
						v-model="lastLoginTime"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
					></el-date-picker>
				</el-form-item>
				<el-form-item label="注册时间">
					<el-date-picker
						v-model="registerTime"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="
							$t('dxn.card_ables_list.start_time')
						"
						:end-placeholder="$t('dxn.card_ables_list.end_time')"
						format="yyyy-MM-dd HH:mm:ss"
						:picker-options="pickerShortcut2"
						:default-time="defaultTime"
						value-format="timestamp"
						align="right"
						:clearable="false"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="search"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90570045')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportLoading"
						@click="handleExport"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%;"
				:max-height="tableHeight"
				highlight-current-row
				header-align="center"
				:header-cell-style="getRowClass"
				@sort-change="handleTableSort"
			>
				<el-table-column
					type="index"
					label="序号"
					width="80"
					align="center"
				/>
				<el-table-column
					align="center"
					label="会员账号"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="直属上级代理"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="总代账号"
					min-width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="俱乐部ID"
					min-width="110"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							v-if="scope.row.clubId"
							class="text-link"
							@click="
								handleJump({
									path: '/dxn/clubManager/clubList',
									query: {
										clubId: scope.row.clubId
									}
								})
							"
						>
							{{ scope.row.clubId }}
						</span>
						<span v-else>-</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="俱乐部名称"
					min-width="160"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.clubName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="累计德州有效投注"
					min-width="150"
					show-overflow-tooltip
					prop="validBetAmount"
				>
					<template slot-scope="scope">
						<span>
							{{
								handleNumber(
									scope.row.currency,
									scope.row.validBetAmount
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="总手牌数"
					min-width="120"
					show-overflow-tooltip
					prop="handCount"
				>
					<template slot-scope="scope">
						{{ scope.row.handCount }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="百手盈利"
					min-width="120"
					show-overflow-tooltip
					prop="hundredHandProfit"
				>
					<template slot-scope="scope">
						{{ scope.row.hundredHandProfit }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					min-width="90"
					show-overflow-tooltip
				>
					<template slot="header">
						<div>入池率</div>
						<div class="header-top-line">VPIP</div>
					</template>
					<template slot-scope="scope">
						{{ scope.row.bringPoolRate + '%' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					min-width="100"
					show-overflow-tooltip
				>
					<template slot="header">
						<div>翻牌前加注率</div>
						<div class="header-top-line">PFR</div>
					</template>
					<template slot-scope="scope">
						{{ scope.row.preFlopRaiseRate + '%' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="注册时间"
					min-width="160"
					show-overflow-tooltip
					prop="createdAt"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="最后登录时间"
					min-width="160"
					show-overflow-tooltip
					prop="lastLoginDatetime"
					sortable="custom"
				>
					<template slot-scope="scope">
						{{ scope.row.lastLoginDatetime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					label="俱乐部入局游戏"
					min-width="130"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<div>
							{{
								scope.row.joinGameLockStatus === 0
									? $t('common.start_up')
									: $t('common.disabled')
							}}
						</div>
						<el-switch
							v-if="hasPermission('90570046')"
							:value="scope.row.joinGameLockStatus"
							:disabled="true"
							:active-value="0"
							:inactive-value="1"
							@click.native.prevent="showApplyDialog(scope.row)"
						/>
					</template>
				</el-table-column>
				<el-table-column align="center" label="操作" width="160">
					<template slot-scope="scope">
						<span
							class="text-link"
							@click="
								handleJump({
									path: '/member/memberManage/memberDetails',
									query: {
										merchantId: scope.row.merchantId,
										userName: scope.row.userName
									}
								})
							"
						>
							查看详情
						</span>
						<span
							class="text-link ml15"
							@click="showRecordDialog(scope.row.id)"
						>
							操作记录
						</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="total"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:current-page.sync="pageNum"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<Apply
			v-if="applyVisible"
			:visible.sync="applyVisible"
			:detailData="detailData"
			@loadData="loadData"
		/>
		<Record
			v-if="recordVisible"
			:visible.sync="recordVisible"
			:detailData="detailData"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import Apply from './components/apply'
import Record from './components/record'
const start = () =>
	dayjs()
		.startOf('day')
		.subtract(6, 'day')
const end = () => dayjs().endOf('day')
export default {
	name: routerNames.clubMemberList,
	components: {
		MainContent,
		Apply,
		Record
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			loading: false,
			exportLoading: false,
			dataList: [],
			ruleForm: {
				clubId: undefined,
				parentProxyName: undefined,
				topProxyName: undefined
			},
			sortParams: {},
			joinGameLockStatus: [],
			lastLoginTime: [],
			registerTime: [start(), end()],
			applyVisible: false,
			recordVisible: false,
			gamePermissionList: [
				{
					code: 1,
					description: '俱乐部禁用'
				},
				{
					code: 0,
					description: '俱乐部启用'
				}
			],
			orderKeyMap: new Map([['createdAt', 1], ['lastLoginDatetime', 2]])
		}
	},
	methods: {
		showApplyDialog(row) {
			this.detailData = {
				id: row.id,
				joinGameLockStatus: row.joinGameLockStatus
			}
			this.applyVisible = true
		},
		showRecordDialog(id) {
			this.detailData = { id: id }
			this.recordVisible = true
		},
		getSearchParams() {
			// timeType 时间类型，0-注册时间, 1-首存时间时间，2-最后登陆时间
			const lastLoginTime = this.lastLoginTime || []
			const registerTime = this.registerTime || []
			const params = {
				...this.ruleForm,
				...this.sortParams,
				lastLoginTimeStart: lastLoginTime[0]
					? dayjs(lastLoginTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				lastLoginTimeEnd: lastLoginTime[1]
					? dayjs(lastLoginTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createdAtStart: registerTime[0]
					? dayjs(registerTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				createdAtEnd: registerTime[1]
					? dayjs(registerTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			Object.keys(params).forEach((key) => {
				if (params[key] === '') {
					params[key] = undefined
				}
			})
			if (this.joinGameLockStatus.length >= 2) {
				params.joinGameLockStatus = undefined
			} else if (this.joinGameLockStatus.length === 1) {
				params.joinGameLockStatus = this.joinGameLockStatus[0]
			}
			return params
		},
		loadData() {
			this.loading = true
			this.dataList = []
			const params = this.getParams({
				queryCondition: this.getSearchParams()
			})
			this.$api
				.getClubMemberList(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						this.dataList = res?.data?.record
						this.total = res?.data?.totalRecord
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 列表排序
		handleTableSort({ prop, order }) {
			this.sortParams = {}
			this.sortParams.orderKey = this.orderKeyMap.get(prop)
			// 升序
			if (order === 'ascending') {
				this.sortParams.orderType = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.sortParams.orderType = 'desc'
			} else {
				this.sortParams.orderKey = undefined
				this.sortParams.orderType = undefined
			}
			if (!this.sortParams.orderKey) {
				this.sortParams.orderType = undefined
			}
			this.loadData()
		},
		// 清空排序
		clearTableSort() {
			this.sortParams = {}
			this.$refs?.refTable?.clearSort()
		},
		search() {
			this.clearTableSort()
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			this.joinGameLockStatus = []
			this.$refs.ruleForm.resetFields()
			this.lastLoginTime = []
			this.registerTime = [start(), end()]
			this.search()
		},
		handleExport() {
			const queryCondition = this.getSearchParams()
			delete queryCondition.orderKey
			delete queryCondition.orderType
			delete queryCondition.pageNum
			delete queryCondition.pageSize
			const params = { queryCondition: queryCondition }
			this.exportLoading = true
			this.exportExcelPublic({
				api: 'exportClubMemberList',
				params
			}).finally(() => {
				this.exportLoading = false
			})
		},
		handleJump(obj) {
			this.$router.push(obj)
		}
	}
}
</script>

<style lang="scss" scoped>
.rule-form {
	margin: 15px 30px;
	.status-lable {
		line-height: 1;
	}
}
::v-deep {
	.el-switch.is-disabled .el-switch__core,
	.el-switch.is-disabled .el-switch__label {
		cursor: pointer;
	}
}
.header-top-line {
	margin-top: -8px;
}
</style>
